<script setup lang="ts">
import { onMounted, useTemplateRef } from 'vue';

const usingRef = useTemplateRef<HTMLCanvasElement>('using');
onMounted(() => {
    const canvas = usingRef.value!.querySelector('canvas') as HTMLCanvasElement;
    const ctx = canvas.getContext('2d')!;
    /* 让 canvas 内部像素尺寸与 css 尺寸一致，避免拉伸 */
    const { width, height } = canvas.getBoundingClientRect();
    canvas.width = width;
    canvas.height = height;
    ctx.shadowColor = 'rgba(192,217,255,0.2)';
    ctx.shadowBlur = 100;
    ctx.shadowOffsetX = 1;
    ctx.shadowOffsetY = 1;

    ctx.beginPath();
    ctx.fillStyle = '#ffffff';
    ctx.arc(width / 2, height / 2, 100, 0, Math.PI * 2);
    ctx.fill();
});
</script>

<template>
    <div class="using" ref="using">
        <canvas />
        <div class="box">
            <div class="circle"></div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.using {
    height: 400px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    canvas {
        width: 300px;
        height: 300px;
    }
    .box {
        width: 300px;
        height: 300px;
        display: grid;
        place-items: center;
        overflow: hidden;

        .circle {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            box-shadow: 1px 1px 100px #bbcdff;
        }
    }
}
</style>
